import type { App } from "vue"
// 引入 vxe-table
import "xe-utils"
import VXETable /*Grid*/ from "vxe-table"
import VXETablePluginAntd from "vxe-table-plugin-antd"
import "vxe-table/lib/style.css"

import JVxeTable from "./JVxeTable"
import { getEventPath } from "/@/utils/common/compUtils"
import { registerAllComponent } from "./utils/registerUtils"
import { getEnhanced } from "./utils/enhancedUtils"

export function registerJVxeTable(app: App) {
  // VXETable 全局配置
  const VXETableSettings = {
    // z-index 起始值
    zIndex: 1000,
    table: {},
  }

  // 添加事件拦截器 event.clearActived
  // 比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
  VXETable.interceptor.add("event.clearActived", function (this: any, params) {
    // 获取组件增强
    const col = params.column.params
    const { $event } = params
    const interceptor = getEnhanced(col.type).interceptor
    // 执行增强
    const flag = interceptor["event.clearActived"]?.call(this, ...arguments)
    if (flag === false) {
      return false
    }

    const path = getEventPath($event)
    for (const p of path) {
      let className: any = p.className || ""
      className = typeof className === "string" ? className : className.toString()

      /* --- 特殊处理以下组件，点击以下标签时不清空编辑状态 --- */

      // 点击的标签是JInputPop
      if (className.includes("j-input-pop")) {
        return false
      }
      // 点击的标签是JPopup的弹出层、部门选择、用户选择
      if (className.includes("j-popup-modal") || className.includes("j-depart-select-modal") || className.includes("j-user-select-modal")) {
        return false
      }
      // 点击的是日期选择器
      if (className.includes("j-vxe-date-picker")) {
        return false
      }
      // 执行增强
      const flag = interceptor["event.clearActived.className"]?.call(this, className, ...arguments)
      if (flag === false) {
        return false
      }
    }
  })
  // 注册插件
  VXETable.use(VXETablePluginAntd)
  // 注册自定义组件
  registerAllComponent()
  // 执行注册方法
  app.use(VXETable, VXETableSettings)
  app.component("JVxeTable", JVxeTable)
}
